import React, {useState} from 'react';
import {Avatar, Flex, Popover} from "antd";
import {UserOutlined} from '@ant-design/icons';
import {MessageInfo} from "../../domain";

const MessageCmpt: React.FC<MessageInfo> = (messageInfo: MessageInfo) => {


    const username: string = "Yiwyn"

    const [open, setOpen] = useState(false);

    const hide = () => {
        setOpen(false);
    };

    const handleOpenChange = (newOpen: boolean) => {
        setOpen(newOpen);
    };

    const showChat = (me?: boolean) => {
        if (me) {
            return (
                <Flex justify={"flex-end"}>
                    {username}:
                    <Avatar size={42} icon={<UserOutlined/>}
                            style={{margin: "0.5rem"}}/>
                </Flex>
            )
        } else {
            return (
                <Flex>
                    <Avatar size={42} icon={<UserOutlined/>}
                            style={{marginLeft: "0.5rem", marginRight: "0.5rem"}}/>
                    {username}:
                </Flex>
            )
        }

    }


    return (
        <>
            <Flex vertical gap="middle" style={{marginBottom: "1rem", width: "100%"}}>

                <Flex justify={messageInfo.me ? "flex-end" : "flex-start"}>

                    <Flex vertical>
                        {/*头像框 用户名*/}

                        {showChat(messageInfo.me)}

                        <Popover
                            content={<a onClick={hide}>Close</a>}
                            trigger="click"
                            open={open}
                            onOpenChange={handleOpenChange}
                        >
                            <div style={{
                                marginLeft: "4rem",
                                width: "max-content",
                                maxWidth: "100%",
                                padding: "0.5rem 0.5rem",
                                boxShadow: "2px 2px 10px 1px rgb(100,100,100)",
                                borderRadius: "0.3rem",
                            }}>
                                {messageInfo.msgContent}

                            </div>
                        </Popover>
                    </Flex>
                </Flex>
            </Flex>
        </>

    )
}

export default MessageCmpt;